<template>
  <!-- 根容器：占满全屏，无滚动 -->
  <div class="w-full h-screen overflow-hidden rounded-lg scrollbar-hide">
    <div class="flex h-full gap-4">
      <!-- 外层padding替代body间隙，不影响高度 -->
      <!-- 侧边栏：继承父级h-full，移除固定calc高度 -->
      <aside class="w-[200px] bg-white rounded-lg p-2 flex flex-col h-full">
        <!-- 标题Logo -->
        <div class="flex items-center justify-center py-3 p-[20px]">
          <!-- 移除冗余p-[20px] -->
          <img :src="logo" class="w-[170px] h-[30px] object-contain" />
        </div>

        <!-- 菜单列表：flex-1占满剩余空间，移除冗余p-[20px]和mt-[-20px] -->
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo flex-1 p-[15px] mt-[-20px]"
          :collapse="isCollapse"
          style="width: 100%"
        >
          <template v-for="item in routes[0].children" :key="item.index">
            <!-- 无子集菜单 -->
            <el-menu-item
              :index="item.index"
              @click="handleMenuClick(item)"
              v-if="!item.hidden"
              class="h-[40px] rounded-xl my-1 transition-all duration-300 mt-[5px]"
              :class="
                index === item.index
                  ? 'bg-[white] border border-[white] text-[black] rounded-[10px] font-[700]'
                  : 'text-[black] border-[white]'
              "
            >
              <el-icon>
                <Reading
                  v-if="isKnowPath == item.path"
                  :class="
                    index === item.index ? 'text-[#507eef]' : 'text-[black] '
                  "
                />
                <Memo
                  v-else
                  :class="
                    index === item.index ? 'text-[#507eef]' : 'text-[black] '
                  "
                />
              </el-icon>

              <span>{{ item.title }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </aside>

      <!-- 主内容区：flex-1 + h-full 占满剩余高度 -->
      <main class="flex-1 h-full overflow-hidden bg-[white] rounded-lg">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup lang="js">
import { ref, watch , onMounted} from 'vue'
import { useRouter, useRoute } from 'vue-router'
import logo from '@/assets/svg/logo.png'
import routes from "@/router/static.js";
import {
  Memo,Reading
} from '@element-plus/icons-vue'

// 定义响应式变量记录路径状态
const isKnowPath = ref();

// 在客户端挂载后获取路径
onMounted(() => {
  isKnowPath.value = window.location.pathname ;
});

const index = ref('1')
const router = useRouter()
const route = useRoute()
// const isCollapse = ref(false)

// 菜单点击处理
const handleMenuClick = (item) => {
  index.value = item.index
  router.push({ name: item.name })
}


// 递归扁平化路由
const flattenRoutes = (routes) => {
  return routes.reduce((acc, route) => {
    acc.push(route)
    if (route.children && route.children.length) {
      acc = acc.concat(flattenRoutes(route.children))
    }
    return acc
  }, [])
}

// 监听路由变化更新菜单选中状态
watch(
  () => route.path,
  (newPath) => {
    const flattenedRoutes = flattenRoutes(routes[0].children)
    const matched = flattenedRoutes.find(item => item.path === newPath)
    if (matched) index.value = matched.index
  },
  { immediate: true }
)
</script>

<style lang="less">
/* 重置根元素高度，确保贯通 */
html,
body,
#app {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Element UI样式覆盖 */
.el-menu {
  --el-menu-bg-color: transparent;
  --el-menu-text-color: #1096f1;
  --el-menu-active-color: #000;
  --el-menu-hover-bg-color: transparent;
}

/* 菜单项hover样式 */
.el-menu-item:not(.bg-white):hover,
.el-sub-menu__title:not(.bg-white):hover span {
  background-color: white !important;
  color: black !important;
  border-radius: 10px !important;
}

/* 移除子菜单标题默认样式 */
.el-sub-menu__title {
  height: 40px !important; /* 统一高度为40px */
  padding: 0 20px !important;
  background-color: transparent !important;
}

/* 隐藏菜单组标题 */
.el-menu-item-group__title {
  padding: 0 !important;
  height: 0 !important;
}

/* 修复子菜单边框问题 */
.el-sub-menu .el-menu {
  padding-left: 10px !important;
}
</style>
